<template>
	<view>
		<view class="box">
			<view class="box_config">
				<u-tabs :list="tabsList" :scrollable="false" @click="onChange"></u-tabs>
			</view>
			<view v-if="list" class="content">
				<view :class=" index==0?'on li':'li'" v-for="item,index in list" :key="index" @click="jump(item)">
					<view class="title text-ellipsis">{{ item.title }}</view>
					<view class="chuli flex-cb">
						<view>
							<view>{{ item.member || '' }}</view>
							<view>{{ item.time }}</view>
						</view>
						<view v-if="active==0" class="btn">回复</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="!is && list.length >= 5" status="nomore" line />
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			active: '0',
			page: 0, //页码
			is: true, //控制是否还能切换下一页
			list: [],
			tabsList: [
				{ name: '待回复' },
				{ name: '已回复' }
			]
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		// 跳转详情
		jump(item) {
			uni.navigateTo({
				url: '/pages/feedbackList/feedback?id=' + item.id
			});
		},
		// 列表
		getList() {
			if (!this.is) return
			this.page = this.page + 1
			this.$app.ajax({
				data: {
					pagination: {
						page: this.page,
						rows: 10
					},
					param: {
						venueId: uni.getStorageSync('GYMID'),
						status: this.active
					}
				},
				api: this.$api.feedBackList()
			}).then((res) => {
				if (res.errorCode != '000000') return;
				if (res.recordList.length === 0 && this.page != 1 && res.recordList) {
					this.is = false
					return;
				}
				if (res.recordList.length < 10 || !res.recordList) {
					this.is = false
				}
				let arr = res.recordList;
				let arrs = [];
				if (arr) {
					arrs = this.list.concat(arr);
				} else {
					arrs = this.list;
				}
				this.list = arrs
			});
		},
		onChange(item) {
			this.active = item.index
			this.is = true
			this.page = 0
			this.list = []
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
	}
};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
.box_config {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: #fff;
}

.content {
	padding: 30rpx;
	padding-bottom: 150rpx;
}

.li {
	background-color: #fff;
	border-radius: 8rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
}

.title {
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	line-height: 1.5;
	color: #222222;
}

.title text {
	font-size: 22rpx;
	color: #4167c1;
	line-height: 36rpx;
	border-radius: 4rpx;
	border: 1px solid #4167c1;
	padding: 0 10rpx;
	display: inline;
	margin-right: 20rpx;
}
.li.on .title text {
	border: 1px solid #dd5040;
	color: #dd5040;
}

.chuli {
	font-size: 26rpx;
	line-height: 1.5;
	color: #666666;
	margin-top: 30rpx;
}

.chuli .btn {
	width: 112rpx;
	display: inline;
	line-height: 50rpx;
	height: 52rpx;
	box-sizing: border-box;
	border-radius: 26rpx;
	border: 1px solid #4167c1;
	font-size: 24rpx;
	text-align: center;
	color: #4167c1;
}
</style>
